<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading" :style="{ 'marginTop': header.init.height + 'px' }">
			<tui-navigation-bar @init="initNavigation" @change="changeNavigation" :title="header.title" :color="tui.getColorSite().title.color" :backgroundColor="tui.getColorSite().title.backgroundColor" :splitLine="header.splitLine" :isOpacity="header.isOpacity" :maxOpacity="header.maxOpacity" :transparent="header.transparent" :scrollTop="header.scrollTop" :scrollRatio="header.scrollRatio" :isCustom="header.isCustom" :isImmersive="header.isImmersive" :isFixed="header.isFixed" :backdropFilter="header.backdropFilter" :dropDownHide="header.dropDownHide" :zIndex="header.zIndex">
				<view class="tui-header-icon" :style="{ top: header.init.top + 'px' }">
					<tui-icon name="arrowleft" :color="tui.getColorSite().title.color" @click="back"></tui-icon>
				</view>
			</tui-navigation-bar>
			<view class="u-content" v-if="tui.inArray(get.tpl,['agreement'])">
				<u-parse :content="info.content" :lazyLoad="parse.lazyLoad" :tagStyle="parse.style" :previewImg="parse.previewImg"></u-parse>
			</view>
			<view v-if="tui.inArray(get.tpl,['banner'])">
				<u-parse :content="info.content" :lazyLoad="parse.lazyLoad" :tagStyle="parse.style" :previewImg="parse.previewImg"></u-parse>
			</view>
			<view v-if="tui.inArray(get.tpl,['qrcode'])">

				<view>
					<view class="tui-banner-swiper">
						<swiper class="tui-banner-box" :duration="150" :circular="true" :style="{'height':pageData.posterHeight+'px'}">
							<swiper-item v-for="(item, index) in pageData.posterArr" :key="index" class="tui-banner-item">
								<image :src="item.fileUrl" class="tui-slide-image" mode="heightFix" />
							</swiper-item>
						</swiper>
					</view>
					<view v-if="tui.inArray(get.tpl,['qrcode'])" style="padding:50rpx 120rpx;">
						<tui-button shadow shape="circle" :type="tui.getColorSite().button.type" height="65rpx" width="100%" @click="detail('downloadFile',user.userInfo.share_qr_code.fileUrl)">请长按图片保存</tui-button>
					</view>
				</view>
			</view>
			<tui-divider width="80%" v-if="tui.inArray(get.tpl,['agreement'])">已被浏览{{info.hits}}次</tui-divider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				get: {},
				header: {
					title: '', //NavigationBar标题
					splitLine: true, //是否需要分割线
					isOpacity: false, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: false, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					posterArr: [],
					posterHeight: 0,
				},
				info: {},
				parse: {
					lazyLoad: true,
					style: {
						img: 'width:100%;',
					},
					previewImg: false,
				},
				xhrUrl: '',
				appInit: {},
				user: {},
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			if (typeof that.get.title !== 'undefined') {
				that.header.title = that.get.title;
				if (that.header.title.length > 13) {
					that.header.title = that.header.title.slice(0, 13) + '...';
				}
				that.$forceUpdate();
			}
			console.log("self:getData=>", that.get);
			let obj = {};
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;

					switch (that.get.tpl) {
						case 'qrcode':
							that.pageData.posterHeight = res.windowHeight - 130;
							break;
						default:
							console.log(that.get.tpl);
							break;
					}
				}
			});
			that.$forceUpdate();
			switch (that.get.tpl) {
				case 'agreement':
					that.xhrUrl = '/agreement';
					break;
				case 'banner':
					that.xhrUrl = '/advert';
					break;
				default:
					console.log(that.get.tpl);
					break;
			}
			that.initialize();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			uni.$once('wxGetUserPhone', function(res) {
				console.log('监听到事件来自 wxGetUserPhone', res);
				that.userInfo = res.user;
				uni.$off('wxGetUserPhone')
			})
			// #endif
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.header.scrollTop = e.scrollTop;
		},
		methods: {
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.user = that.tui.getCache("user");
					console.log('self:user=>', that.user);
					if (typeof(that.user) == 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			async __init() {
				let that = this;
				that.appInit = that.tui.getCache("appInit");
				console.log('self:appInit=>', that.appInit);
				let data = {};
				switch (that.get.tpl) {
					case 'qrcode':
						that.pageData.posterArr = that.user.userInfo.poster_list;
						break;
					case 'agreement':
						data = await that.tui.get(that.xhrUrl, {
							id: that.get.id,
						});
						that.info = data.data;
						if (typeof that.get.title === 'undefined') {
							that.header.title = that.info.title;
							if (that.header.title.length > 13) {
								that.header.title = that.header.title.slice(0, 13) + '...';
							}
						}
						that.info.content = that.tui.htmlInit(that.info.content);
						break;
				}
				that.pageData.loading = true;
				setTimeout(function() {}, 300);
			},
			async detail(type, item = {}) {
				let that = this;
				switch (type) {
					case 'publicForm':
						that.tui.urlHref('/pages/public-form?' + that.tui.initParamsData({
							title: item.title,
							tpl: item.tpl,
							timestamp: that.tui.formatDate().timestamp
						}));
						break;
					case 'publicInfo':
						that.tui.urlHref('/pages/public-info?' + that.tui.initParamsData({
							title: item.title,
							tpl: item.tpl,
							id: item.id,
							timestamp: that.tui.formatDate().timestamp
						}));
						break;
					case 'publicList':
						that.tui.urlHref('/pages/public-list?' + that.tui.initParamsData({
							title: item.title,
							tpl: item.tpl,
							timestamp: that.tui.formatDate().timestamp
						}));
						break;
					case 'goodsClick':
						that.tui.urlHref('/pages/good-info' + '?' + that.tui.initParamsData({
							title: item.title,
							id: item.id,
							timestamp: that.tui.formatDate().timestamp
						}));
						break;
					case 'downloadFile':
						that.tui.toast("请长按图片保存！", false, function() {}, 1500);
						// that.tui.downloadFile(item);
						break;
					default:
						console.log(type, item);
						break;
				}
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
			// that.pageData.loading = false;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
		},
		// 页面返回
		onBackPress() {
			let that = this;
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			console.log('分享!')
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.u-content {
		padding: 0 10rpx;
	}

	.share-box {
		text-align: center;
		margin-top: 30rpx;

		.share-qr-code {
			width: 420rpx;
			height: 420rpx;
		}
	}
</style>